<script setup>
import { computed, ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { route } from 'uview-plus'
import { getCategoryListApi } from '@/apis/category'
import { useCartStore } from '@/store'
const i = ref(0)
const categoryList = ref([])
const subCategoryList = computed(() => categoryList.value[i.value]?.children)
const getCategoryList = async () => {
  const res = await getCategoryListApi()
  categoryList.value = res.data.data
}



// 监听选项改变 ，获取子项
const change = (index) => {
  console.log('选项改变：', index)
  i.value = index;
}

const onClickLevel3Item = (item) => {
  route({
    url: '/pages/goods/search',
    params: {
      categoryId: item.id
    }
  })
}

const cartStore = useCartStore()
const token = uni.getStorageSync('token')
onShow(() => {
  getCategoryList()
  
if (token) {
    cartStore.getCount()
  }
})


</script>
<template>
  <view class="page">
    <!-- 导航栏 -->
    <view class="nav-box">
      <up-navbar leftIcon="" :placeholder="true" :height="50" bgColor="#fff">
        <template #center>
          <up-search :showAction="false" :disabled="true" class="search-box" placeholder="搜索"></up-search>
        </template>
</up-navbar>
</view>

    <view class="content">
      <uv-vtabs :chain="false" :list="categoryList" keyName="categoryName" @change="change">
        <uv-vtabs-item>
          <view class="item" v-for="(level2, index2) in subCategoryList" :key="index2">
            <view class="item-title">
              <text class="text">{{ level2.categoryName }}</text>
            </view>
            <view class="item-content" v-if="level2.children">
              <up-grid :border="false" :col="3">
                <up-grid-item class="grid-item" v-for="(level3, index3) in level2.children" :key="index3"
                  @click="onClickLevel3Item(level3)">
                  <up-image src="/static/images/home-category.png" width="60rpx" height="60rpx"
                    class="grid-image"></up-image>
                  <text class="grid-text">{{ level3.categoryName }}</text>
                </up-grid-item>
              </up-grid>
            </view>
          </view>
        </uv-vtabs-item>
      </uv-vtabs>
    </view>
  </view>
</template>

<style scoped lang="scss">
.page {
  .nav-box {
    .search-box {
      padding: .2rem 1rem .2rem;
      border-bottom: 1px solid #F9F9F9;
    }
  }

  .content {

    .item {
      padding: 2rem 20rpx;

      .item-title {
        margin-bottom: .8rem;
        font-size: 1.1rem;
        font-weight: 700;
        color: #333;

      }

      .item-content {
        .grid-item {
          margin-bottom: 1rem;

          .grid-image {
            margin-bottom: .5rem;
          }
        }

      }
    }
  }
}
</style>